<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1824px;height:1026px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '新型冠状病毒疫情时间序列数据图'
            },
            tooltip: {
                trigger: 'axis'
            },
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
            legend: {                
            },
            dataset:{
                source:[
                    ['date','确诊','疑似','死亡','治愈'],
					['01.13', 41, 0, 1, 0],
					['01.14', 41, 0, 1, 0],
					['01.15', 41, 0, 2, 5],
					['01.16', 45, 0, 2, 8],
					['01.17', 62, 0, 2, 12],
					['01.18', 198, 0, 3, 17],
					['01.19', 275, 0, 4, 18],
					['01.20', 291, 54, 6, 25],
					['01.21', 440, 37, 9, 25],
					['01.22', 571, 393, 17, 25],
					['01.23', 830, 1072, 25, 34],
					['01.24', 1287, 1965, 41, 38],
					['01.25', 1975, 2684, 56, 49],
					['01.26', 2744,  5794, 80, 51],
					['01.27', 4515, 6973, 106, 60],
					['01.28', 5974, 9239, 132, 103],
					['01.29', 7711, 12167, 170, 124],
					['01.30', 9692, 15238, 213, 171],
					['01.31', 11791, 17988, 259, 243],

                ]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type:'category',
                //boundaryGap:false,
                axisPointer: {
                type: 'shadow'
                }
                },
                {
                type:'category',
                boundaryGap:true,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel:{
                    show:false
                },
                axisPointer: {
                type: 'shadow'
                }
                }
            ],
            yAxis:[ 
                {
                name:'确诊、疑似',
                type:'value',
                max:18000,
                interval:1000
                },
                {
                name:'死亡、治愈',
                type:'value',
                max:270,
                interval:15
                }
            ],
            series: [
                          
                {
                //name: '确诊',
                type: 'line',
                yAxisIndex: 0,
                xAxisIndex: 0,
                lineStyle:{
                    color: 'rgba(255,0,0,1)'
                },
                itemStyle:{
                    color: 'rgba(255,0,0,1)'
                },
                encode:{
                 x:'date',
                 y:'确诊',
                 seriesName: [1]   
                }
                },
                {
                //name: '疑似',
                type: 'line',
                yAxisIndex: 0,
                xAxisIndex: 0,
                lineStyle:{
                    color: '#FF8c00'
                },
                itemStyle:{
                    color: '#FF8c00'
                },
                encode:{
                 x:'date',
                 y:'疑似',
                 seriesName: [2]  
                }
                }, 
                {
                //name: '死亡',
                type: 'bar',
                yAxisIndex: 1,
                xAxisIndex: 1,
                barGap: '-100%', // Make series be overlap
                barWidth: '40%',
                itemStyle:{
                    color: 'rgba(0,0,0,0.75)'
                },
                encode:{
                 x:'date',
                 y:'死亡',
                 seriesName: [3]  
                }
                },
                {
                //name: '治愈',
                type: 'bar',
                yAxisIndex: 1,
                xAxisIndex: 1,
                barWidth: '40%',
                itemStyle:{
                    color: 'rgba(0,153,102,0.5)'
                },                
                encode:{
                 x:'date',
                 y:'治愈',
                 seriesName: [4]
                }
                }                    

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>